<script lang="ts" setup>
import { ref } from 'vue'
import playerCard from './components/playerCard.vue'

interface TeamOption {
  label: string
  value: string
  disabled: boolean
}

const showTeam = ref('0')
const teamList = ref<TeamOption[]>([
  { label: '我方', value: '0', disabled: false },
  { label: '敌方', value: '1', disabled: false },
])
</script>

<template>
  <div class="match_assistant">
    <div class="match_assistant_select">
      <el-segmented v-model="showTeam" :options="teamList" block />
    </div>
    <el-scrollbar view-class="match_assistant_list_view" class="match_assistant_list">
      <playerCard v-for="item in 5" :key="item" />
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.match_assistant {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .match_assistant_select {
    padding: .5rem 1.2rem;
    width: 100%;
    flex-shrink: 0;
  }

  .match_assistant_list {
    flex: 1;
    padding: 1rem 1.4rem;
  }

  ::v-deep(.match_assistant_list_view) {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}
</style>
